<template>
	<!-- VIP弹框 -->
	<view class="share">
		<view :class="{ 'share-box': shareState }"></view>
		<view class="share-item" :class="{ 'share-show': shareState }">
			<view class="Block" @click="handShareFa">
				<view class="b-hezi">
					<view class="w-abbr">点击右上角</view>
					<view class="u-m-t-20 t-abbr"><u-image width="120" mode="widthFix" :src="oss + '/mine/p-oi.png'"></u-image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'zhuanfa',
	data() {
		return {
			shareState: false
		};
	},
	created() {},
	methods: {
		// 显示分享
		handleShowFa() {
			this.shareState = true;
		},
		// 隐藏分享
		handShareFa() {
			this.shareState = false;
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
/* 选中 */
.share-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.6);
	transition: 0.3s;
	z-index: 999;
}

/* // 进入分享动画 */
.share-show {
	transition: all 0.3s ease;
	transform: translateY(0%) !important;
}

/* // 离开分享动画 */
.share-item {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100% !important;
	height: auto;
	transition: all 0.3s ease;
	transform: translateY(100%);
	z-index: 1999;
	border-top-left-radius: 45rpx;
	border-top-right-radius: 45rpx;
}

.Block {
	width: 100%;
	height: 100vh;
	border-top-left-radius: 45rpx;
	border-top-right-radius: 45rpx;

	.b-hezi {
		width: 580rpx;
		height: auto;
		margin: auto;
	}

	.w-abbr {
		text-align: right;
		font-size: 36rpx;
		color: #fff;
	}

	.t-abbr {
		margin-left: 250rpx !important;
	}
}

/*#endif*/
</style>
